<template>
  <div id="Skill">
    <crumb />
    <div class="content">
      <!-- 左边 -->
      <div class="leftList">
        <!-- 选择模块 -->
        <div class="choice">
          <div class="select" v-if="skillList">
            <selectDiv :data="skillList" @choice="choiceData = $event"/>
          </div>
          <div class="span">进度：{{finishedRate}}</div>
        </div>
        <div class="summary">
          <span>共{{catalogNum}}章节&nbsp;{{trainingNum}}个任务</span>
          <span class="left">领先{{leadRate}}%的学生</span>
        </div>
        <div class="progressBar">
          <div :style="{width: leadRate+'%'}"></div>
        </div>
        <div class="list">
          <!-- <dl v-for="(item, i) in trainingList" :class="{active: trainingIndex === i}" :key="i" @click="listLevel1(i)"> -->
          <dl v-for="(item, i) in trainingList"  :key="i" @click="listLevel1(i)">
            <dt>{{item.catalogName}}</dt>
            <dd  v-for="(child, ix) in item.childrens" :key="ix" :class="{active: trainingChildIndex === ix}" @click="listLevel2(ix)" @click.stop>{{child.catalogName}}</dd>
          </dl>
        </div>
      </div>
      <!-- 右边 -->
      <div class="rightConent">
        <div class="head">
          <div class="h1">{{rightConent.catalogName}}</div>
          <div class="otherMessage">
            <div>任务数量： <span>{{rightConent.trainingTaskList.length}}</span></div>
            <div>已完成： <span>{{rightConent.finishedDesc}}</span></div>
            <!-- <div>平均得分： <span>97</span></div> -->
          </div>
        </div>
        <div class="body">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>任务名称</th>
                <th>口语句数</th>
                <th>完成状态</th>
                <th>时长</th>
                <!-- <th>得分</th> -->
                <!-- <th>排名</th> -->
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in rightConent.trainingTaskList" :key="i">
                <td>{{item.sort_index}}</td>
                <td>{{item.resource_oral_name}}</td>
                <td>{{item.oral_num}}</td>
                <td>{{{1:'进行中',2:'完成'}[item.finished_flag]||'未开始'}}</td>
                <td>{{getDuration(item.total_duration)}}</td>
                <!-- <td>{{item.resource_training_name}}</td> -->
                <!-- <td>{{item.resource_training_name}}</td> -->
                <td>
                  <div class="button">
                    <!-- <button @click="$router.push({ name: 'skillfollowread' })">进入训练</button>
                    <button @click="$router.push({ name: 'skillfollowhistory' })">查看历史</button>
                    <button @click="$router.push({ name: 'skillfollowdubselect' })">我要配音</button>
                    <button @click="$router.push({ name: 'skillfollowdubranklist' })">排行榜</button> -->
                    <button @click="skip('read', i)">进入训练</button>
                    <button @click="skip('history', i)">查看历史</button>
                    <button @click="skip('dubselect', i)">我要配音</button>
                    <button @click="skip('dubranklist', i)">排行榜</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import selectDiv from '@/components/small/select'
import { speechIndex, getClassResource } from '@/api/student/training/speech'
import { getDuration } from '@/utils/index'
export default {
  name: 'Skill',
  components: {
    selectDiv
  },
  data () {
    return {
      getDuration: getDuration,
      resData: {},
      skillList: [],
      choiceData: '',
      finishedRate: '',
      catalogNum: '',
      trainingNum: '',
      leadRate: 0,
      trainingIndex: 0,
      trainingChildIndex: 0,
      trainingList: [
        { catalogName: '', catalogId: '', catalogLevel: '', finishedRate: '', childrens: [] }
      ],
      rightConent: {
        catalogName: '',
        trainingTaskList: [],
        finishedDesc: ''
      }
    }
  },
  methods: {
    async speechIndex () {
      let res = await speechIndex()
      this.resData = res.data
      let data = res.data
      // ?这部分有待接口完善
      this.skillList.push({ value: data.lessonTrainingCatalogId, text: data.lessonName, checked: true })
      //
      this.finishedRate = data.finishedRate
      this.trainingNum = data.trainingNum
      this.catalogNum = data.catalogNum
      this.leadRate = Number(data.leadRate)
      // 章节目录
      this.trainingList = data.trainingList.map(el => {
        return {
          catalogName: el.catalogName,
          catalogId: el.catalogId,
          catalogLevel: el.catalogLevel,
          finishedRate: el.finishedRate,
          finishedDesc: el.finishedDesc,
          // childrens: el.childrens
          childrens: el.trainingTaskList
        }
      })
      this.listLevel1(0)
    },
    async getClassResource () {
      await getClassResource()
    },
    listLevel1 (num) { // 1级菜单点击
      this.trainingIndex = num
      this.trainingChildIndex = 0
      // this.rightConent.catalogName = this.trainingList[num].childrens[0].catalogName
      // this.rightConent.trainingTaskList = this.trainingList[num].childrens[0].trainingTaskList
      // this.rightConent.finishedDesc = this.trainingList[num].childrens[0].finishedDesc
      this.rightConent.catalogName = this.trainingList[num].catalogName
      this.rightConent.trainingTaskList = this.trainingList[num].childrens
      this.rightConent.finishedDesc = this.trainingList[num].finishedDesc
    },
    listLevel2 (num) { // 2级菜单点击
      this.trainingChildIndex = num
    },
    skip (str, index) {
      this.$router.push({ name: 'skillfollow' + str,
      // str === 'dubselect' ? {} :
        query: {
          // resource_oral_id: this.trainingList[this.trainingIndex].childrens[index].resource_oral_id,
          lessonOralCatalogId: this.trainingList[this.trainingIndex].childrens[index].lesson_training_catalog_id,
          resourceOralId: this.trainingList[this.trainingIndex].childrens[index].resource_oral_id,
          orglNum: this.trainingList[this.trainingIndex].childrens[index].oral_num,
          lessonOralBatchId: this.resData.lessonOralBatchId
        } })
    }
  },
  mounted () {
    this.speechIndex()
    this.getClassResource()
  }
}
</script>
<style scoped lang="scss">
#Skill{
  .content{
    padding: 10px;background-color: #fff;border: solid 1px rgba(229, 229, 229, 1);min-height: 750px;border-radius: 4px;
    .leftList{
      width: 35%;min-height: 730px;float: left;
      .choice{
        padding:20px 10px;background: #f5f5f5;border-bottom: solid 1px #fff;
        .select{
          width: 70%;display: inline-block;vertical-align: top
        }
        .span{
          width: 30%;display: inline-block;text-align: right;font-size: 16px;color: #101D37;height: 36px;vertical-align: top;line-height: 36px;
        }
      }
      .summary{
        height: 36px;background: #f5f5f5;line-height: 36px;padding: 0 10px;
        span{
          color: #101D37;
        }
        .left{
          float: right;font-weight: bold;color: #101D37
        }
      }
      .progressBar{
        position: relative;height: 5px;border-radius: 2px;background: #eaeaea;
        overflow: hidden;
        div{
          position: absolute;top: 0;left: 0;height: 100%;border-radius: 2px;background: #5FB878;
        }
      }
      .list{
        padding: 10px 0;background: #fafafa;min-height: 610px;
        dl{
          font-size: 14px;overflow: hidden;transition: all .3s;
          dt,dd{
            border-bottom: solid 1px #eaeaea;height: 50px;line-height: 50px;padding: 0 10px;cursor: pointer;position: relative;color: #101D37;transition: all .3s;overflow: hidden;
          }
          dt{
            font-weight: bold;
          }
          dd{
            padding: 0 24px;height: 0;border-width: 0px;
          }
          .active{
            color: #72B6FF
          }
          // dt::after{
          //   content: '';position: absolute;width: 0;height: 0;right: 10px;top: 50%;z-index: 1;margin-top: -3px;border-style: solid;border-width: 6px 6px 0 6px;transform: translateZ(0) rotate(0);border-color: #72B6FF transparent transparent transparent;transition: transform 0.35s;
          // }
        }
        // dl.active dd{
        //   height: 50px;border-width: 1px;
        // }
        // dl.active dt::after{
        //   transform: rotateX(-180deg)
        // }
      }
    }
    .rightConent{
      width: calc(65% - 10px);float: right;min-height: 730px;
      .head{
        .h1{
          padding: 20px 20px;background: #f5f5f5;font-size: 20px;line-height: 36px;border-bottom: solid 1px #fff;
        }
        .otherMessage{
          height: 36px;background-color: #f5f5f5;line-height: 36px;display: flex;padding: 0 20px;justify-content: space-between;
          div{
            color: #101D37;
            span{
              color: #72B6FF;font-weight: bold;
            }
          }
        }
      }
      .body{
        min-height: 610px;background: #fafafa;margin-top: 5px;padding: 10px;
        table{
          width: 100%;
          thead{
            th{
              text-align: center;font-weight: bold;color:#101D37;font-size: 16px;
              min-width: 60px;
            }
          }
          tr{
            height: 50px;line-height: 50px;padding: 0 10px;border-bottom: solid 1px #eaeaea;font-size: 14px;
          }
          tbody{
            td{
              text-align: center;font-size: 12px;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
              .button{
                height: 30px;line-height: 30px;border-radius: 3px;display: inline-block;vertical-align: middle;overflow: hidden;
                button:nth-child(1){
                  color: #5FB878;border-color: #5FB878;
                }
                button{
                  border: none;background: none;vertical-align: bottom;height: 30px;outline: none;margin:  0;border-bottom: solid 1px #72B6FF;
                  color: #72B6FF;
                }
              }
            }
            td:nth-child(1){
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>
